<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="form-item">
          <el-select
            v-model="titleType"
            style="width:40%"
            placeholder="请选择"
            @change="titleTypeClick"
          >
            <el-option
              v-for="item in productOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-input placeholder="请输入" v-model="TitleNameOrorder" style="margin-left:10px"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item">
          <span class="title">生产岗位</span>
          <el-select v-model="param.data.postName" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in productOptions1"
              :key="item.releId"
              :label="item.releName"
              :value="item.releId"
            ></el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="form-item">
          <span class="title" style="width:120px">取货/送货时间</span>
          <el-date-picker
            v-model="createdateList"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
          ></el-date-picker>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="form-item button-container">
          <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
          <el-button @click="handleToAllOrder()" type="primary" :loading="loading">批量打印订单</el-button>
          <!-- <el-button @click="handleToAllproduct()" size="small" type="primary">生产完成</el-button> -->
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部生产订单" name></el-tab-pane>
      <el-tab-pane label="待生产订单" name="1"></el-tab-pane>
      <el-tab-pane label="生产中订单" name="2"></el-tab-pane>
      <el-tab-pane label="完成生产订单" name="3"></el-tab-pane>
      <el-tab-pane label="异常生产订单" name="4"></el-tab-pane>
    </el-tabs>
    <div class="table-body">
      <el-table
        :data="tableData"
        border
        v-loading="isLoading"
        style="width: 100%"
        :row-key="getRowKey"
        @selection-change="handleSelectionChange"
        :expand-row-keys="expends"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="tips" v-if="props.row.buyerMessage">订单备注：{{props.row.buyerMessage}}</div>
            <div class="tips1" v-if="props.row.errorRemark">异常备注：{{props.row.errorRemark}}</div>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="70" align="center" :reserve-selection="true"></el-table-column>
        <el-table-column prop="orderId" label="订单编号"></el-table-column>
        <el-table-column prop="title" width="180" label="商品" align="center">
          <template slot-scope="scope">
            <template>
              <el-image class="header-image" fit="cover" :src="scope.row.image"></el-image>
              <div>{{scope.row.title}}</div>
              <!-- <div v-show="!scope.row.disabled"></div> -->
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="ownSpec" label="商品SKU"></el-table-column>
        <el-table-column prop="num" label="数量">
          <template slot-scope="scope">
            x
            <span>{{scope.row.num}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="订单创建时间"></el-table-column>
        <el-table-column prop="sourceType" label="订单来源" :formatter="formatSource"></el-table-column>
        <el-table-column prop="timelyDelivery" label="物流类型" :formatter="formatTimelyDelivery"></el-table-column>
        <el-table-column prop="sendstartTime" label="取/送货时间"></el-table-column>
        <el-table-column prop="postName" label="生产岗位"></el-table-column>
        <el-table-column prop="status" label="订单状态" :formatter="formatStatus"></el-table-column>
        <el-table-column prop="price" label="订单金额">
          <template slot-scope="scope">
            ￥
            <span>{{scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="110" align="center">
          <template slot-scope="scope">
            <el-button @click="handleToOrder(scope.row)" size="small" type="success">打印订单</el-button>
            <el-button
              @click="handleToProduction(scope.row)"
              type="primary"
              size="small"
              style="margin-top:10px"
              v-if="scope.row.status =='2'"
            >生产完成</el-button>
            <el-button
              @click="handleToProduction(scope.row)"
              type="primary"
              size="small"
              style="margin-top:10px"
              v-if="scope.row.status =='1'"
            >开始生产</el-button>
            <el-button
              style="margin-top:10px"
              size="small"
              type="danger"
              @click="handleClickDelete(scope.row)"
              v-if="scope.row.status =='1'||scope.row.status =='2'"
            >生产异常</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title :visible.sync="DialogVisiblejj" width="40%">
      <el-form :model="form" :rules="rules" ref="formRef">
        <el-form-item label="异常原因" prop="explain" :label-width="formLabelWidth">
          <el-input type="textarea" :rows="3" placeholder="请填写" v-model="form.explain"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button plain @click="resetForm('formRef')">取消</el-button>
          <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      formLabelWidth: "120px",
      form: {
        explain: "",
        id: ""
      },
      rules: {
        explain: [
          { required: true, message: "请填写异常原因", trigger: "blur" }
        ]
      },
      DialogVisiblejj: false,
      name: "",
      createdateList: [],
      param: {
        data: {
          status: "",
          sendstartTime: "",
          sendendTime: "",
          postName: "",
          title: "",
          orderId: ""
        },
        queryRequest: {
          page: 1,
          size: 10
        }
      },
      productOptions1: [],
      productOptions: [
        { id: "1", title: "商品名称" },
        { id: "2", title: "订单编号" }
      ],
      activeName: "",
      tableData: [],
      titleType: "1",
      isLoading: false,
      total: 1,
      multipleSelection: [],
      expends: [],
      TitleNameOrorder: "",
      loading: false
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.getExpends();
    this.initData();
    this.productData();
  },
  methods: {
    formatSource(row, column) {
      if (row.sourceType == "1") {
        return "微信";
      } else if (row.sourceType == "2") {
        return "商盟";
      } else if (row.sourceType == "3") {
        return "收银";
      }
    },
    formatTimelyDelivery(row, column) {
      if (row.timelyDelivery == "1") {
        return "物流";
      } else if (row.timelyDelivery == "2") {
        return "即时配送";
      } else if (row.timelyDelivery == "3") {
        return "到店自取";
      }
    },
    formatStatus(row, column) {
      if (row.status == "1") {
        return "待生产";
      } else if (row.status == "2") {
        return "生产中";
      } else if (row.status == "3") {
        return "已完成";
      } else if (row.status == "4") {
        return "异常";
      }
    },
    //批量打印
    handleToAllOrder() {
      this.loading = true;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要打印的订单",
          type: "warning"
        });
        return;
      }
      var param = {
        orderId: []
      };
      this.multipleSelection.forEach(item => {
        param.orderId.push(item);
      });
      this.$service.productionSheet(param).then(res => {
        if (res.code == "00000") {
          this.loading = false;
          this.$message({
            message: "打印成功",
            type: "success"
          });
          this.multipleSelection = [];
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    //批量生产
    // handleToAllproduct(){},
    titleTypeClick(e) {
      if (e == "1") {
        this.param.data.title = this.TitleNameOrorder;
        this.param.data.orderId = "";
      } else {
        this.param.data.orderId = this.TitleNameOrorder;
        this.param.data.title = "";
      }
    },
    productData() {
      this.$service.menuGetProductionList().then(res => {
        if (res.code == "00000") {
          this.productOptions1 = res.data;
        }
      });
    },
    initData() {
      this.isLoading = true;
      if (this.createdateList.length > 0) {
        this.param.data.sendstartTime = this.createdateList[0];
        this.param.data.sendendTime = this.createdateList[1];
      }
      this.$service.productionorderGetProductionList(this.param).then(res => {
        this.isLoading = false;
        if (res.code == "00000") {
          if (res.data.length == 0 && this.param.queryRequest.page != 1) {
            this.param.queryRequest.page -= 1;
            this.initData();
          }
          this.tableData = res.data.rows || [];
          this.total = res.data.total || 0;
        }
      });
    },
    getExpends() {
      var arr = [];
      this.tableData.forEach(item => {
        if (!item.buyerMessage || !item.errorRemark) {
          arr.push(item.id);
        }
      });
      this.expends = arr;
    },
    getRowKey(row) {
      return row.id;
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        const element = val[i];
        this.multipleSelection.push(element.orderId);
      }
    },
    search() {
      if (this.titleType == "1") {
        this.param.data.title = this.TitleNameOrorder;
      } else {
        this.param.data.orderId = this.TitleNameOrorder;
      }
      this.param.queryRequest.page = 1;
      this.initData();
    },
    resetSearchCotnet() {
      this.param.data.status = "";
      this.param.data.sendstartTime = "";
      this.param.data.sendendTime = "";
      this.param.data.postName = "";
      this.param.data.title = "";
      this.param.data.orderId = "";
      this.TitleNameOrorder = "";
      this.createdateList = [];
    },
    handleClick(e) {
      this.param.data.status = this.activeName;
      this.initData();
    },
    handleToOrder(scope) {
      var param = {
        orderId: []
      };
      param.orderId.push(scope.orderId);
      this.$service.productionSheet(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "打印成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    handleToProduction(scope) {
      var param = {
        id: scope.id,
        status: "",
        errorRemark: ""
      };
      if (scope.status == "1") {
        param.status = "2";
      } else if (scope.status == "2") {
        param.status = "3";
      }
      this.$service.updateProductionMessage(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "成功",
            type: "success"
          });
          this.initData();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    handleClickDelete(scope) {
      this.DialogVisiblejj = true;
      this.form.id = scope.id;
    },
    resetForm(formName) {
      this.DialogVisiblejj = false;
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        let message = this.form;
        if (valid) {
          var param = {
            id: this.form.id,
            status: "4",
            errorRemark: this.form.explain
          };
          this.$service.updateProductionMessage(param).then(res => {
            if (res.code == "00000") {
              this.$message({
                message: "成功",
                type: "success"
              });
              this.DialogVisiblejj = false;
              this.$refs[formName].resetFields();
              this.initData();
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        }
      });
    },
    currentPageChange(e) {
      this.param.queryRequest.page = e;
      this.initData();
    }
  },
  watch: {}
};
</script>
<style scoped>
.header-image {
  width: 60px;
  height: 60px;
  font-size: 8px;
}
.el-table
  /deep/
  .el-table__header
  .el-table-column--selection
  .cell
  .el-checkbox:after {
  color: #909399;
  content: "全选";
  font-size: 12px;
  margin-left: 5px;
}
.el-table /deep/.el-checkbox__inner {
  width: 20px;
  height: 20px;
}
.el-table /deep/.el-checkbox__inner::after {
  height: 10px;
  left: 6px;
}
.tips {
  background: #fffaeb;
  color: #ff9900;
  line-height: 35px;
  padding: 0 10px;
}
.tips1 {
  background: #fffaeb;
  color: #ff1e00;
  line-height: 35px;
  padding: 0 10px;
}
</style>
